<template>
  <el-menu
      :default-active=defaultActive
      :background-color=backgroundColor
      :text-color=textColor
      :collapse="isCollapse"
      :router="true"
      :unique-opened="true"
  >
    <el-menu-item index="/admin">
      <el-icon><home-filled /></el-icon>
      <template #title>
        <span>主页</span>
      </template>
    </el-menu-item>
    <el-sub-menu index="1">
      <template #title>
        <el-icon>
          <platform/>
        </el-icon>
        <span>平台设置</span>
      </template>

      <el-menu-item index="/admin/platform/user">
        <el-icon>
          <user/>
        </el-icon>
        <template #title>
          <span>用户管理</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/admin/platform/dept">
        <template #title>
          <el-icon>
            <office-building/>
          </el-icon>
          <span>部门管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/admin/platform/role">
        <template #title>
          <el-icon>
            <star/>
          </el-icon>
          <span>角色管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/admin/platform/permission">
        <template #title>
          <el-icon><key /></el-icon>
          <span>权限管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/admin/platform/teacher">
        <template #title>
          <el-icon>
            <avatar/>
          </el-icon>
          <span>教师管理</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/admin/platform/student">
        <template #title>
          <el-icon>
            <user-filled />
          </el-icon>
          <span>学生管理</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/admin/platform/question">
        <template #title>
          <el-icon>
            <chat-line-square/>
          </el-icon>
          <span>题目管理</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/admin/platform/option">
        <template #title>
          <el-icon><operation /></el-icon>
          <span>选项管理</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/admin/platform/job">
        <template #title>
          <el-icon><tickets /></el-icon>
          <span>任务管理</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><tools /></el-icon>
        <span>系统监控</span>
      </template>

      <el-menu-item index="/admin/platform/user">
        <el-icon><histogram /></el-icon>
        <template #title>
          <span>在线用户</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script>

export default {
  name: "Menu",
  data() {
    return {
      backgroundColor: '#334154',
      textColor: '#c1cbd8',
      defaultActive: 2
    }
  }
}
</script>
<script setup>
import {useStore} from 'vuex'
import {computed} from "vue";

const store = useStore()
const isCollapse = computed(() => store.state.isCollapse)
</script>
<style scoped>
.el-menu {
  border: 0px;
  margin: 0px;
}

.el-menu:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
}

.el-menu--collapse {
  min-height: 100%;
}
</style>